<template>
  <div class="app-container">
    <add v-if="showDialog" @close="closeDialog" @update="getCouponList"></add>
    <el-button type="primary" icon="el-icon-plus" class="button" @click="showDialog=!showDialog">添加</el-button>
     <el-table :data="couponData" border style="width: 100%" class="couponTable">
      <el-table-column prop="cardId"             label="券类号"         min-width="160"></el-table-column>
      <el-table-column prop="issueCount"         label="发放上限"         width="120"></el-table-column>
      <el-table-column prop="faceValue"          label="卡券面额"       width="100"></el-table-column>
      <el-table-column label="卡券类型"        width="80">
        <template slot-scope="scope">
          <span>{{scope.row.type=='FIRST_INVEST'?'首投返现':'复投返现'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="卡券有效期"       width="140">
        <template slot-scope="scope">
          <span>{{scope.row.takeDateStarted}}~{{scope.row.takeDateEnd}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="expireDays"     label="卡券有效时长"       width="140"></el-table-column>
      <el-table-column prop="enableCompanyStrings"         label="可用商家"       width="100"></el-table-column>
      <el-table-column prop="subscriptionOrigin"        label="起投金额"       width="80"></el-table-column>
      <el-table-column prop="term"         label="起投期限"       width="120"></el-table-column>
      <el-table-column prop="description"       label="描述内容"       width="80"></el-table-column>
      <el-table-column prop="takeCount"               label="已发放"          width="80"></el-table-column>
      <el-table-column label="生成时间"          min-width="140">
        <template slot-scope="scope">
          <span>{{scope.row.validityStartDate}}~{{scope.row.validityEndDate}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark"               label="备注"          width="80"></el-table-column>
       <el-table-column label="操作"          width="140">
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="deleted(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="size">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import add from './addDialog'
import { couponList, couponDelete } from 'api/coupon'
export default {
  components: {
    add
  },
  data() {
    return {
      couponData: [],
      showDialog: false,
      pageSize: 10,
      curPage: 1,
      size: 0
    }
  },
  created() {
    this.getCouponList()
  },
  methods: {
    async getCouponList() {
      this.closeDialog()
      const parm = {
        pageSize: this.pageSize,
        curPage: this.curPage - 1
      }
      try {
        let back = await couponList(parm)
        back = back.data
        if (back.resultCode === '200') {
          console.log(back.result)
          this.couponData = back.result
          this.size = back.size
        }
      } catch (err) {
        this.$alert('出错了' + err, '提示')
      }
    },
    closeDialog() {
      this.showDialog = false
    },
    async deleted(scope) {
      try {
        let back = await couponDelete(scope.row.cardId)
        back = back.data
        if (back.resultCode === '200') {
          this.getCouponList()
        }
      } catch (err) {
        this.$alert('出错了' + err, '提示')
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getCouponList()
    },
    handleCurrentChange(val) {
      this.curPage = val
      this.getCouponList()
    }
  }
}
</script>
<style lang="scss">
  .couponTable{
    margin-top:20px;
  }
  .block{
    float: right;
    margin-top:20px;
  }
</style>
